import { View, Text, Image } from "@tarojs/components";
import styles from "./index.module.scss";
import ImageList from "./ImageList";
import { AtIcon } from "taro-ui3";
import { useState } from "react";
import CommentList from "./CommentList";

export interface IChat {
  id: string;
  avatar: string;
  name: string;
  content: string;
  createAt: string;
  time: string;
  type: string;
}

const ChatItem = (props: IChat) => {
  const { name = "", time = "" } = props;
  const [isLike, setIsLike] = useState(false);
  const closeComment = () => {};
  const [isOpenedComment, setOpenedComment] = useState(false);
  return (
    <View className={styles["chat-item-container"]}>
      <View className={styles["info-container"]}>
        <View className={styles["user-container"]}>
          <View className={styles["username"]}>
            <Image
              className={styles["user-avatar"]}
              src={require("@/assets/images/rain.webp")}
              mode={"aspectFill"}
            />
          </View>
          <View className={styles["user-info"]}>
            <View className={styles["name"]}>{name}</View>
            <View className={styles["time"]}>{time}</View>
          </View>
        </View>

        <View className={styles["user-mood"]}>
          <Image
            className={styles["user-mood-img"]}
            src={require("@/assets/images/rain.webp")}
            mode={"aspectFill"}
          />
        </View>
      </View>
      <View className={styles["user-content"]}>
        <Text className={styles["content"]}>{props.content}</Text>
        <ImageList
          list={[
            "http://gips2.baidu.com/it/u=853190258,2588232240&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720",
            "http://gips2.baidu.com/it/u=853190258,2588232240&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720",
          ]}
        />
      </View>
      <View className={styles["user-comment"]}>
        <View className={styles["comment-like"]}>
          <AtIcon
            value={isLike ? "heart-2" : "heart"}
            size="30"
            color={isLike ? "#f00" : "#ccc"}
            onClick={() => setIsLike(!isLike)}
          ></AtIcon>
          <Text className={styles["comment-icon-text"]}>2.3k</Text>
        </View>
        <View>
          <AtIcon value="message" size="30" color="#ccc" onClick={() => setOpenedComment(!isOpenedComment)}></AtIcon>
          <Text className={styles["comment-icon-text"]}>199</Text>
        </View>
      </View>
      <CommentList onClose={() => setOpenedComment(false)} isOpened={isOpenedComment} />
    </View>
  );
};

export default ChatItem;
